<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
  监视可以异步更新数据(界面), 而计算属性只能同步的
  监视的回调默认在数据发生改变时才会调用, 但如果需要初始时就执行第一次: immediate为true
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
  <p>人的详细信息: {{info}}</p>
  <br>
  <p>{{fullName}}</p>
  <p>{{fullName}}</p>
  <p>{{fullName}}</p>
  <p>{{fullName}}</p>
  <p>{{fullName}}</p>
  <p>{{fullName3}}</p>
  <p>{{fullName3}}</p>
  <p>{{fullName3}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data () {
      return {
        firstName: 'A',
        lastName: 'B',
        // fullName: 'A-B'
        // fullName2: 'A-B',
        fullName2: '',
        info: '',
      }
    },

    watch: {
      // 监视firstName
      
      // firstName (value) {
      //   // 更新fullName2
      //   this.fullName2 = value + '-' + this.lastName

      //   // 模拟异步请求得到用户信息
      //   setTimeout(() => {
      //     const info =  `我的姓名为${this.firstName} ${this.firstName}以及其它信息`
      //     // 更新info
      //     this.info = info
      //   }, 1000)
      // },

      firstName: {
        handler(value) {
          // 更新fullName2
          this.fullName2 = value + '-' + this.lastName

          // 模拟异步请求得到用户信息
          setTimeout(() => {
            const info =  `我的姓名为${this.firstName} ${this.lastName}以及其它信息`
            // 更新info
            this.info = info
          }, 1000)
        },
        immediate: true, // 初始时就会执行第一次 ==> 默认是false
      }
    },

    computed: {
      // 计算属性的getter必须同步返回, 如果是异步返回不可以  ==> 只能用watch
      // info () {
      //   setTimeout(() => {
      //     return `我的姓名为${this.firstName} ${this.firstName}以及其它信息`
      //   }, 1000)
      // },

      /* 
      什么时候调用?
      1. 初始显示调用
      2. 依赖数据变化

      Vue控制的所有回调函数this都是vm
      */
      fullName () {
        console.log('fullName()')
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 相当于监视了firstName和lastName
        get () {
          console.log('fullName3 get')
          return this.firstName + '-' + this.lastName
        },
        // 监视当前fullName3
        set (value) {
          console.log('fullName3 set', value)
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },
  
  })

  // 监视lastName
  vm.$watch('lastName', function (value) {
    // 更新fullName2
    this.fullName2 = this.firstName + '-' + value
  })

  console.log(vm)
</script>
</body>
</html>